<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机图片</title>
</head>
<body>
    <!-- 小图 -->
    <div style="background-color:red;border: dotted; height: 50px; width: 50px">
        <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
    </div>
    <!-- 大图 -->
    <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
        <img src="" id="big" style="width: 400px; height: 400px; display: none;">
    </div>

    <!-- 开始和结束按钮 -->
    <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
    <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];

    //2.定义计数器
    let count = 0
    //3.定义定时器对象
    let time = null
    //4.定义图片路径变量
    let imgSrc = ""
    //5.为开始按钮绑定单击事件
    $("#startBtn").click(function () {
        //6.设置按钮状态
        //禁用开始按钮
        $(this).attr("disabled",true)
        //启用停止按钮
        $("#stopBtn").attr("disabled",false)
            //7.设置定时器，循环显示图片
            time = setInterval(function () {
            //8.循环获取图片路径
                let index = count % imgs.length; //0 % 10 = 0 1 % 10 = 1 ... 9 % 10 = 10 10 % 10 = 0
            //9.将当前图片显示到小图片上
                imgSrc = imgs[index];
                $("#small").attr("src",imgSrc)
            //10.计数器自增
            count++
        },10)
    })
    //11.为停止按钮绑定单击事件
    $("#stopBtn").click(function () {
        //12.取消定时器
        clearInterval( time)
        //13.设置按钮状态
        //禁用停止按钮
        $(this).attr("disabled",true)
        //启用开始按钮
        $("#startBtn").attr("disabled",false)
        //14.将图片显示到大图片上
        $("#big").attr("src",imgSrc)
        $("#big").attr("style","width: 400px; height: 400px;")
    })
</script>
</html>